<template>
    <div>
        <BDXtop ></BDXtop>
        <div class="BDXPic">
            <img class="BDXPicImg" :src="titleImg">
        </div>
        <div class="shangpin" v-for="(item, index) in list" :key="index">
            <div class="left">
                <div class="Ltitle">{{item.name}}</div>
                <div class="Lname">{{item.title1}}</div>
                <div class="Lstar"><van-rate size="2" v-model="item.star" readonly /></div>
                <div class="Ltext">{{item.title2}}</div>
                <div class="Ljiage"><span class="cankaojia">参考价</span>￥{{item.productId}}</div>

            </div>
            <div class="right">
                <div class="Rpaiming">TOP{{item.star}}</div>
                <div>
                    <img class="bdxImg" :src="item.img" >
                </div>
            </div>
        </div>
    </div>
</template>


<script setup>
import BDXtop from '@/components/List/BDXtop.vue'
import { ref,onMounted } from 'vue';
import { useRoute } from 'vue-router';
import {getTSBDkouhong} from '@/api/bangdan'
const list = ref()


//路由传参信息
const route = useRoute()
console.log(route.query.data);
// 获取1storeage中存储的BDXPic中图片链接
let titleImg = localStorage.getItem('bangdantupian')

onMounted(async ()=>{
      //根据路由传参，向后端查询相关榜单信息
      let res=await getTSBDkouhong(route.query.data)
    //  渲染页面
    list.value = res.data.page.list
    console.log(res.data.page.list);
})

</script>

<style lang="scss" scoped>
.BDXPic {
    width: 100%;
    height: 250px;
    background-color: red;
    margin-bottom: 10px;
    .BDXPicImg{
        width: 100%;
    height: 250px;
    }
}
.shangpin{
    display: block;
    width: 310px;
    box-shadow: 1px 2px 2px 2px #979797;
    border-radius: 8px;
    // width: 90%;
    height: 236px;
    padding: 10px;
    margin: 20px;
    position: relative;
    
    .left{
        position: absolute;
        top: 25px;
        left: 20px;
        width: 200px;
        height: 190px;
        
        .Ltitle{
            font-size: 20px;
            padding-top: 5px;
        }
        .Lname{
            padding-top: 5px;
            font-size: 16px;
            color: #666666;
        }
        .Lstar{
            width: 50px;
            height: 10px;
        }
        .Ltext{
            width: 188px;
            padding-top: 5px;
            font-size: 12px;
            color: #999999;
            height:34px; 
            text-overflow:-o-ellipsis-lastline; 
            overflow:hidden; 
            text-overflow: ellipsis; 
            display: -webkit-box; 
            word-break: break-all;
            -webkit-line-clamp: 2; 
            -webkit-box-orient: vertical; 
        }
        .Ljiage{
            padding-top: 10px;
            font-size: 20px;
            color: #FF8094;
            .cankaojia{
                color: #666666;
                font-size: 10px;
            }
        }
    }
    .right{
        position: absolute;
        right: 5px;
        top: 25px;
        width: 100px;
        height: 190px;
        .Rpaiming{
            padding: 5px 0;
            color: #FF8094;
            font-size: 20px;
        }
        .bdxImg{
            width: 90px;
            height: 150px;
        }
    }
}
</style>